@orange: #ff8821;
@lightgrey: #efefef;
@cell: 50px;

body {
    padding-left: @cell*1.5;
    background-color: @lightgrey;
    padding-bottom: 2*@cell;
}

h1 {
    line-height: @cell*2;
    margin: 0;
    font-size: @cell/1.3;
    font-family: tellural;
    font-weight: normal;
}

#global-menu {
    padding: 0;
    margin:  0;
    list-style-type: none;

    position: fixed;
    left:     0;
    top:      0;
    bottom:   0;

    width: @cell;

    font-family: tellural;

    background-color: @orange;

    > li:first-child {
        border-bottom: 1px solid white;
    }

    > li > a {
        color: white;
        display: block;
        height: @cell;
        overflow:hidden;

        &.active {
            background-color: @orange/1.1;
            border-top:       2px solid @orange/1.2;
            height: @cell - 2px;
            text-decoration: none;
        }

        > div {
            display: block;
            float: left;
            line-height: @cell;
            font-size: (@cell/1.5);
        }

        > .icon {
            width: @cell;
            text-align: center;
            overflow:hidden;
            position:relative;
        }

        > .text {
            display: none;
            padding: 0 0.5em;
            font-size: (@cell/2);
        }
    }


    &:hover {
        width: auto;

        > li > a {

            &:hover {
                background-color: @orange/1.1;
            }
            text-decoration: none;

            > .text {
                display: inline-block;
            }
        }
    }
}

#local-menu {
    float: left;
    width: 4*@cell;

    list-style-type: none;
    margin: 0;

    > li {
        height: @cell;
        line-height: @cell;
        font-family: tellural;
        font-size: @cell/2;

        > a {
            color: black;
            display: block;
            padding-left: @cell/4;

            &.active {
                background-color: white;
            }
        }
    }
}

.actionbar {
    margin: 8px 0 2px;
    height: 30px;

    a.menu {
        font-family: tellural;
        padding-right: 1em;
    }

    > .btn-group {
        font-size: 1em;
        cursor: pointer;

        a {
            color: black;
            padding: 10px;
            line-height: 1em;

            // small white label in branch activity list
            > .pull-right {
                background-color: white;
                line-height: 1em;
            }
        }

        .caret {
            margin-top: 7px;
        }

        span.behind , span.above {
            font-size: 0.7em;
        }
    }

    .btn-group.open {
        .dropdown-toggle {
            box-shadow: none;
            -webkit-box-shadow: none;
        }
    }
}

#content {
    padding: 1px @cell/2;
    background-color: white;
    min-height: 500px;

    &.with-menu {
        margin-left: 4*@cell;
    }
}

.flash-messages {
    position: absolute;
    line-height: @cell/2;
    top: @cell*1.5;
    right: 0;
    left: @cell*5.5;
    font-family: tellural;
    margin-top: -5px;

    .error {
        border-bottom: 5px solid #FF8821;
    }

    .success {
        border-bottom: 5px solid #21FF88;
    }
}


.form-horizontal .control-group::before, .form-horizontal .control-group::after {
    display: inline;
}
